<template>
  <div class="riskManagement-root runningAnalysis-root">
    <div class="box">
      <warnLevel :alarmTypeOptions="alarmTypeOptions" :dateValueMap="dateYearValueMap" :dataSelectOptions="dataYearSelectOptions" />
    </div>
    <div class="box">
      <warnType :alarmTypeOptions="alarmTypeOptions" :dateValueMap="dateValueMap" :dataSelectOptions="dataSelectOptions"/>
    </div>
    <div class="box-100">
      <warnTrend :alarmTypeOptions="alarmTypeOptions" :dateValueMap="dateYearValueMap" :dataSelectOptions="dataYearSelectOptions" />
    </div>
  </div>
</template>

<script>
  import warnLevel from './components/warnLevel.vue';
  import warnType from './components/warnType.vue';
  import warnTrend from './components/warnTrend.vue';
  import { dateValueMap,dataSelectOptions,dateYearValueMap,dataYearSelectOptions } from '@/utils/global.js';
  export default {
    name: "index",
    components: {
      warnLevel,warnType,warnTrend
    },
    data() {
      return {
        alarmTypeOptions:[],
        dateValueMap:dateValueMap,
        dateYearValueMap:dateYearValueMap,
        dataSelectOptions:dataSelectOptions,
        dataYearSelectOptions:dataYearSelectOptions
      };
    },
    methods: {},
    created(){
      this.alarmTypeOptions = []
      this.$commonJs.filterDataDict("alarmSclassify",this.alarmTypeOptions)
      this.alarmTypeOptions.splice(0,0,{label:"全部类型",value:"",name:""})
      this.alarmTypeOptions.forEach(t=>{
        t.value = t.name
      })
    }
  }
</script>

<style lang="scss" scoped>
  /*注意引入路径*/
  @import "../../../../runningAnalysis/runningAnalysis";
  .riskManagement-root {
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    .box-100{
      width: 100%;
      padding: 8px 12px;
    }
    .box{
      width: 50%;
      padding: 8px 12px;
      margin-bottom: 20px;
    }
  }
</style>
